<template>

    <el-dialog 
    v-model="visible"
    :title= "dialogTitle"
    width="800px"
    :before-close="handleClose"
  >
    <el-form 
      v-for="(user, index) in users.user"
      :key="user.key"   
      :rules= "rules[index]"
      :model="user"                   
    >
    <h2>用户{{index + 1}}</h2>
    
      <el-row :gutter="20">
        <el-col :span="12" >
        <el-form-item label="登录账号：" prop="loginAccount">
        <el-input v-model="user.loginAccount"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="姓名：" prop="name">
        <el-input v-model="user.name"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色类型：" prop="roleType">
        <el-select v-model="user.roleType" placeholder="角色类型" @change="handleRoleTypeChange(user)">
          <el-option
            v-for="item in conRoleType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="12">
        <el-form-item label="角色名称：" prop="roleName">
        <el-input v-model="user.roleName"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12" :offset="6">
        <el-form-item label="出生日期：" prop="birthDate">
        <div>
          
          <el-date-picker
          v-model="user.birthDate"
          type="datetime"
        />
        </div>
        </el-form-item>
        </el-col>

        <el-col :span="12">
          
        <div style="margin-left: auto;">
          <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="user.sex">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
        </div>
        
        </el-col>
        <el-col :span="12">
        <div>
          <el-form-item label="状态" prop="status">
          <el-radio-group v-model="user.status">
          <el-radio value="正常">正常</el-radio>
          <el-radio value="禁用">禁用</el-radio>
        </el-radio-group>
        </el-form-item>
        </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号：" prop="phone">
        <el-input v-model="user.phone"></el-input>
        </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱：" prop="email">
        <el-input v-model="user.email"></el-input>
        </el-form-item>
        </el-col>

        <el-col :span="12" :offset="6">
          <el-form-item label="组织机构：">
        <el-select v-model="user.zzjg" placeholder="组织机构">
          <el-option
            v-for="item in school"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-form-item>
        </el-col>

        </el-row>
        <hr>
        <el-button v-if="!booldelet" @click="removeuser(user)" style="float: right; background-color:aquamarine;">删除用户{{ index + 1 }}</el-button>
        

      </el-form>
      
      <el-button v-if="booldelet" @click="adduser">新增</el-button>
      <el-button type = "primary">提交</el-button>
      <el-button @click="handleClose">取消</el-button>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ElMessageBox, type FormRules } from 'element-plus'
import { reactive, ref, watch} from 'vue';

const emits = defineEmits(["update:visible"]);
const props = defineProps({visible:Number})

const visible = ref();


emits("update:visible", 0);

  const dialogTitle = ref('')
  const booldelet = ref(true)


  const users = reactive<{
    user: useritem[]
  }>({
    user:[{
      key:1,
      loginAccount:'',
      name: '',
      roleType:'',
      roleName:'',
      birthDate:  '',
      sex: '',
      status: '',
      phone: '',
      email: '',
      zzjg: '',
      },
    ],
  })

  interface useritem{
    key: number
    loginAccount:string
    name: string
    roleType:string
    roleName:string
    birthDate: string | Date
    sex: string
    status: string
    phone: string
    email: string
    zzjg: string
  }

  const rule : FormRules<useritem> = {
    loginAccount:[
      {required: true, message: '请输入登录账号', trigger: ['blur', 'change']},
      {
        pattern: /^[A-Za-z0-9`~!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/]*$/, 
        message: '只能输入数字、英文和特殊字符，不能有空格',
        trigger: ['blur', 'change'],
      }
    ],
    name:[
      {required: true, message: '请输入姓名', trigger: ['blur', 'change']},
    ],
    roleType:[
      {required: true, message: '请选择角色类型', trigger: ['blur', 'change']},
    ],
    roleName:[
      {required: true, message: '请输入角色姓名', trigger: ['blur', 'change']},
    ],
    birthDate:[
      {required: true, message: '请选择出生日期', trigger: ['blur', 'change']},
    ],
    sex:[
      {required: true, message: '请选择性别', trigger: ['blur', 'change']},
    ],
    status:[
      {required: true, message: '请选择状态', trigger: ['blur', 'change']},
    ],
    phone:[
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: ['blur', 'change'] }
    ],
    email:[
      { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,message: '请输入正确的邮箱格式（例如：xxx@xxx.com）',trigger: ['blur', 'change'] }
    ]
  }

  const handleRoleTypeChange = (user: useritem) => {
    user.roleName = '';
  }

  const rules = reactive<FormRules<useritem>[]>([rule])

  const adduser = () => {
    const newUser = {
      key: Date.now(),
      loginAccount: '',
      name: '',
      roleType: '',
      roleName: '',
      birthDate: '',
      sex: '',
      status: '',
      phone: '',
      email: '',
      zzjg: '',
    }
    users.user.push(newUser);
    rules.push({...rule})
  }


  const removeuser = (item:useritem) => {
    const index = users.user.indexOf(item)
    if(index != -1){
      users.user.splice(index, 1)
    }
  }

  const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定要关闭这个对话框吗')
    .then(() => {
      emits("update:visible", 0);
      visible.value = false;
    })
    .catch(() => {

    })
  }

  const school = [
    {
    value: '大学',
    label: '大学',
    },
    {
      value: '中学',
      label: '中学',
    },
    {
      value: '小学',
      label: '小学',
    },
  ]

  const conRoleType = [
  {
    value: '系统用户',
    label: '系统用户',
  },
  {
    value: '非系统用户',
    label: '非系统用户',
  },
]

  // const submit = (formUser: )

  watch(
    () => props.visible,
    (newVal) => {
        visible.value = newVal != 0;
        switch(newVal){
            case 1:
                dialogTitle.value = "新增用户";
                booldelet.value = true;
                break;
            case 2:
                dialogTitle.value = "删除用户";
                booldelet.value = false;
                break;
        }
    }
  )

</script>